<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>无限加载</title>
	<!-- <link rel="stylesheet" type="text/css" href="normalize.css" /> -->
	<!-- <link rel="stylesheet" type="text/css" href="default.css"> -->
  	<link rel="stylesheet" href="waterfall.css">
</head>
<body>
	<div class="htmleaf-container">
		<header class="htmleaf-header">
			<h1>无限加载</h1>
		</header>
		<div role="main">
	      	<ul id="container" class="tiles-wrap animated">
	        <!-- These are our grid blocks   这些都是我们的网格块-->
	        <li><img src="img/image_1.jpg" width="200" height="283"><p>1</p></li>
	        <li><img src="img/image_2.jpg" width="200" height="300"><p>2</p></li>
	        <li><img src="img/image_3.jpg" width="200" height="252"><p>3</p></li>
	        <li><img src="img/image_4.jpg" width="200" height="158"><p>4</p></li>
	        <li><img src="img/image_5.jpg" width="200" height="300"><p>5</p></li>
	        <li><img src="img/image_6.jpg" width="200" height="297"><p>6</p></li>
	        <li><img src="img/image_7.jpg" width="200" height="200"><p>7</p></li>
	        <li><img src="img/image_8.jpg" width="200" height="200"><p>8</p></li>
	        <li><img src="img/image_9.jpg" width="200" height="398"><p>9</p></li>
	        <li><img src="img/image_10.jpg" width="200" height="267"><p>10</p></li>
	        <li><img src="img/image_1.jpg" width="200" height="283"><p>11</p></li>
	        <li><img src="img/image_2.jpg" width="200" height="300"><p>12</p></li>
	        <li><img src="img/image_3.jpg" width="200" height="252"><p>13</p></li>
	        <li><img src="img/image_4.jpg" width="200" height="158"><p>14</p></li>
	        <li><img src="img/image_5.jpg" width="200" height="300"><p>15</p></li>
	        <li><img src="img/image_6.jpg" width="200" height="297"><p>16</p></li>
	        <li><img src="img/image_7.jpg" width="200" height="200"><p>17</p></li>
	        <li><img src="img/image_8.jpg" width="200" height="200"><p>18</p></li>
	        <li><img src="img/image_9.jpg" width="200" height="398"><p>19</p></li>
	        <li><img src="img/image_10.jpg" width="200" height="267"><p>20</p></li>
	        <li><img src="img/image_1.jpg" width="200" height="283"><p>21</p></li>
	        <li><img src="img/image_2.jpg" width="200" height="300"><p>22</p></li>
	        <li><img src="img/image_3.jpg" width="200" height="252"><p>23</p></li>
	        <li><img src="img/image_4.jpg" width="200" height="158"><p>24</p></li>
	        <li><img src="img/image_5.jpg" width="200" height="300"><p>25</p></li>
	        <li><img src="img/image_6.jpg" width="200" height="297"><p>26</p></li>
	        <li><img src="img/image_7.jpg" width="200" height="200"><p>27</p></li>
	        <li><img src="img/image_8.jpg" width="200" height="200"><p>28</p></li>
	        <li><img src="img/image_9.jpg" width="200" height="398"><p>29</p></li>
	        <li><img src="img/image_10.jpg" width="200" height="267"><p>30</p></li>
	        <!-- End of grid blocks -->
	      </ul>
    	</div>
		
	</div>
	
	<!-- include jQuery -->
	  <script src="jquery.min.js"></script>
	  <!-- Include the imagesLoaded plug-in          img——load插件 -->
  	<script src="imagesLoadedWaterfall.js"></script>

	  <!-- Include the plug-in -->
	  <script src="waterfall.js"></script>

	  <!-- Once the page is loaded, initalize the plug-in. -->
	  <script type="text/javascript">
	    (function ($) {
	      // Instantiate wookmark after all images have been loaded
	      // 所有图像都被加载后实例化wookmark
	      var wookmark,
	          container = '#container',
	          $container = $(container),
	          $window = $(window),
	          $document = $(document);

	      imagesLoaded(container, function () {
	        wookmark = new Wookmark(container, {
	          offset: 10, // Optional, the distance between grid items  可选，网格项目之间的距离
	          itemWidth: 200 // Optional, the width of a grid item 可选的，一个网格项的宽度
	        });
	      });

	      /**
	       * When scrolled all the way to the bottom, add more tiles  当滚动一路底部，添加更多的瓷砖
	       */
	      function onScroll() {
	        // Check if we're within 100 pixels of the bottom edge of the broser window.
	        // 检查，如果我们内broser窗口底部边缘100像素。
	        var winHeight = window.innerHeight ? window.innerHeight : $window.height(), // iphone fix 修复
	            closeToBottom = ($window.scrollTop() + winHeight > $document.height() - 100);

	        if (closeToBottom) {
	          // Get the first then items from the grid, clone them, and add them to the bottom of the grid
	          // 得到第一个再从网格项目，克隆它们，并把它们添加到网格的底部
	          var $items = $('li', $container),
	              $firstTen = $items.slice(0, 10).clone().css('opacity', 0);
	          $container.append($firstTen);

	          wookmark.initItems();
	          wookmark.layout(true, function () {
	            // Fade in items after layout 淡入布局之后的项目
	            setTimeout(function() {
	              $firstTen.css('opacity', 1);
	            }, 200);
	          });
	        }
	      };

	      // Capture scroll event. 捕捉滚动事件
	      $window.bind('scroll.wookmark', onScroll);
	    })(jQuery);
	  </script>
</body>
</html>